import { CSSTransition } from 'react-transition-group';
import { CSSTransitionProps } from 'react-transition-group/CSSTransition';

type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right'

interface TransitionGroup {
    animation?: AnimationName;
    className?: string;
    children?: React.ReactNode;
}

const Transition = (props: TransitionGroup & CSSTransitionProps) => {
    const { children, className, animation, ...restProps } = props;

    return (
        <CSSTransition
            className={className ? className : animation}
            {...restProps}
        >
            {children}
        </CSSTransition >
    );
};

Transition.defaultProps = {
    unmountOnExit: true,
    appear: true
};

export default Transition;